<template>
  <van-nav-bar left-arrow @click-left="onClickLeft" />
  <p class="login-p">登录</p>
  <van-cell-group>
    <van-field
      v-model="value1"
      clearable
      placeholder="请输入手机号"
      maxlength="11"
    />
    <!-- <van-field v-model="value2" center clearable placeholder="请输入密码"> -->
    <van-field
      v-if="count == 1"
      v-model="value2"
      right-icon="eye-o"
      placeholder="请输入密码"
      @click-right-icon="changepaw"
    />
    <van-field
      v-if="count == 0"
      v-model="value2"
      right-icon="closed-eye"
      placeholder="请输入密码"
      @click-right-icon="changepaw"
      type="password"
    />
    <!-- </van-field> -->
  </van-cell-group>
  <div class="login-btn" @click="login(value1, value2)" v-if="!value2">
    登录
  </div>
  <div
    class="login-btn1"
    @click="login(value1, value2)"
    v-if="value1 && value2"
  >
    登录
  </div>
  <div class="login-smallbox">
    <p @click="gotologinpassword">帐号注册</p>
    <p>忘记密码?</p>
  </div>
  <div class="loginfoot">
    <p class="loginfoot-p">第三方登录</p>
    <Regfoot></Regfoot>
  </div>
</template>
<script>
//引入与登录接口api
import { getLoginKey } from "@/utils/api";
import JSEncrypt from "jsencrypt";
import Regfoot from "@/views/logreg/Regfoot.vue";
import { mapActions, mapState } from "vuex";
import { Toast } from "vant";

export default {
  async created() {
    let res = await getLoginKey();
    this.publicKey = res.publicKey;
  },
  data() {
    return {
      publicKey: "",
      value1: "",
      value2: "",
      count: 0,
    };
  },
  methods: {
    changepaw() {
      this.count++;
      if (this.count == 2) {
        this.count = 0;
      }
    },
    //传参 用户名和密码
    async login(value1, value2) {
      // 加密登录
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.publicKey);

      // 加密只能对字符串加密
      const userInfo = JSON.stringify({
        uname: value1,
        upwd: value2,
      });
      //使用公钥加密，得到密文
      const encryptKey = encrypt.encrypt(userInfo);
      await this.getLogin({
        info: encryptKey,
      });
      // await this.getLogin({
      //   uname: value1,
      //   upwd: value2,
      // });
      if (this.loginName.status == 4 || this.loginName.status == 3) {
        Toast.fail(this.loginName.msg);
      } else if (this.loginName.status == 0) {
        //成功后 进入首页 且将用户名ID存入本地
        Toast.success(this.loginName.msg);
        localStorage.setItem("userid", this.loginName.result.userId);
        this.$router.push("/index/store"); ///+ this.loginName.result.userId
      }
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    gotologinpassword() {
      this.$router.push("loginpassword");
    },
    ...mapActions("logreg", ["getLogin"]),
  },
  computed: {
    ...mapState("logreg", ["loginName"]),
  },
  components: {
    Regfoot,
  },
};
</script>

<style lang="less">
body {
  background: #fff;
}

.login-p {
  margin-top: 100px;
  margin: 100px auto 40px auto;
  text-align: center;
}
.van-nav-bar {
  &::after {
    border: none;
  }
}
.van-field__body {
  i {
    position: absolute;
    right: 0;
  }
}
.van-badge__wrapper {
  color: rgb(87, 87, 87) !important;
  font-size: 25px;
}
.van-field__control {
  border-bottom: 1px solid rgb(233, 233, 233);
  font-size: 20px;
  padding-bottom: 2px;
  color: #979797;
  font-weight: 500;
}
.van-cell-group {
  padding: 25px;
  &::after {
    border: none;
  }
}
.van-cell {
  padding: 10px !important;
}
.van-cell::after {
  border-bottom: none;
}
.login-btn {
  width: 300px;
  height: 50px;
  background: #dfdfdf;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
  border-radius: 10px;
}
.login-btn1 {
  background: rgb(255, 199, 114);
  width: 300px;
  height: 50px;
  margin: 0 auto;
  text-align: center;
  line-height: 50px;
  color: #ffffff;
  font-size: 17px;
  border-radius: 10px;
}
.login-smallbox {
  display: flex;
  justify-content: space-between;
  padding: 3px 37px;
  font-size: 14px;
  & > :nth-child(1) {
    color: #3e86fa;
  }
  & > :nth-child(2) {
    color: #a1a1a1;
  }
}
.loginfoot {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 30px;
  .loginfoot-p {
    font-size: 14px;
    color: #a5a5a5;
  }
}
.van-field__right-icon {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
